<template>
    <div v-loading="loading">
      <el-container>
        <el-header><h1 style="line-height: 60px;font-size: 20px">{{groupName}}的权限设置</h1></el-header>
        <el-main>
          <el-button type="primary" @click.native.prevent="fold" class="fold">折叠</el-button>
          <el-button type="primary" @click.native.prevent="unfold_list" class="unfold ">展开</el-button>
          <div class="dio">
            <el-tree
              ref="tree"
              :data="data"
              :indent="indent"
              show-checkbox
              node-key="access"
              default-expand-all
              :default-checked-keys="unfold"
              highlight-current
              :props="defaultProps">
            </el-tree>
          </div>
        </el-main>
        <el-footer style="background-color: #ffffff"><el-button type="primary" @click.native.prevent="getKeys" class="getCheckedKeys">开始设置</el-button></el-footer>
      </el-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              loading:true,
              mid:'',
              indent:0,
              edUser:'',
              groupName:'',
              unfold:[],
              data: [],
              defaultProps: {
                children: 'submenu',
                label: 'title'
              }
            }
        },
        methods: {
          fold:function(){
            this.$nextTick(() => {
              for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
                this.$refs.tree.store._getAllNodes()[i].expanded = false;
              }
            });
          },
          unfold_list:function(){
            this.$nextTick(() => {
              for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
                this.$refs.tree.store._getAllNodes()[i].expanded = true;
              }
            });
          },
          init:function () {
            let id=sessionStorage.getItem('jurisdictionId');
            let data = {
              group_id:id,
            };
            let str = this.encryptionAesRsa(data);
            let encryptData = str.split('%$#@zjt@#$%')[0];
            let encryptKey = str.split('%$#@zjt@#$%')[1];
            let incomData = {
              map:'admin_group_permission',
              plum_session_api:localStorage.getItem('token'),
              encryptData:encryptKey,
              encryptKey:encryptData
            };
            this.$http.post('',incomData).then((data)=>{
              if(data.ec==200){
                this.loading = false;
                let all_menu = data.data.all_menu;
                let have_menu = data.data.have_menu;
                all_menu[0].disabled = true;
                this.data = all_menu;
                this.unfold =have_menu;
                this.groupName = data.data.group_name
              }else if(data.ec==401){
                this.$message.error(data.em);
                setTimeout(()=>{
                  this.exitLogin();
                },1500)
              }else {
                this.$message.error(data.em);
              }
            }).catch((err)=>{
              this.$message.error('error!');
            })
          },
          getKeys () {
              var aKey = this.getCheckedKeys(this.data, this.$refs.tree.getCheckedKeys(), 'access');
              var id = sessionStorage.getItem('jurisdictionId');
              var menu_array = JSON.stringify(aKey);
              let data = {
                group_id: id,
                menu_array:menu_array
              };
              let str = this.encryptionAesRsa(data);
              let encryptData = str.split('%$#@zjt@#$%')[0];
              let encryptKey = str.split('%$#@zjt@#$%')[1];
              let incomData = {
                map: 'admin_group_permission_edit',
                plum_session_api: localStorage.getItem('token'),
                encryptData: encryptKey,
                encryptKey: encryptData
              };
              this.$http.post('', incomData).then((data) => {
                if (data.ec == 200) {
                  this.$message.success(data.em);
                  this.$router.push('userGroup')
                } else if (data.ec == 401) {
                  this.$message.error(data.em);
                  setTimeout(() => {
                    this.exitLogin();
                  }, 1500)
                } else {
                  this.$message.error(data.em);
                }
              }).catch((err) => {
                this.$message.error('error!');
              })
          },
          getCheckedKeys (data, keys, key) {
            var res = [];
            recursion(data, false);
            return res;
            function recursion (arr, isChild) {
              var aCheck = [];
              for ( var i = 0; i < arr.length; i++ ) {
                var obj = arr[i];
                aCheck[i] = false;

                if ( obj.submenu ) {
                  aCheck[i] = recursion(obj.submenu, true) ? true : aCheck[i];
                  if ( aCheck[i] ) {
                    res.push(obj[key]);
                  }
                }

                for ( var j = 0; j < keys.length; j++ ) {
                  if ( obj[key] == keys[j] ) {
                    aCheck[i] = true;
                    if ( res.indexOf(obj[key]) == -1 ) {
                      res.push(obj[key]);
                    }
                    break;
                  }
                }
              }
              if ( isChild ) {
                return aCheck.indexOf(true) != -1;
              }
            }
          },
        },
        created() {
          this.init();
        },
    }
</script>

<style scoped>
  .dio{
    margin-top: 50px;
    background-color: #ffffff;
  }
  .dio>>>.el-tree{
   font-size: 18px !important;
  }
  .dio>>>.el-button{
    position: absolute;
    margin-bottom: 0px;
  }
  .el-main{
    height: calc(70vh);
    background-color: #ffffff;
    position: relative;
  }
  .fold{
    left: 20px;
    position: absolute;
    top: 20px;
  }
  .unfold{
    left: 100px;
    position: absolute;
    top: 20px;
  }


  .dio>>>.el-tree-node{
    position: relative;
    padding-left: 15px;
  }
  .dio>>>.el-tree-node__children{
    padding-left: 15px;
  }
  .dio>>>.el-tree-node :last-child:before {
    height: 38px;
  }
  .dio>>>.el-tree>.el-tree-node:before{
    border-left: none;
  }
  .dio>>>.el-tree>.el-tree-node:after{
    border-top: none;
  }
  .dio>>>.el-tree-node:before,.el-tree-node:after{
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .dio>>>.tree :first-child .el-tree-node:before{
    border-left: none;
  }
  .dio>>>.el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0;
    height: 100%;
    top: -20px;
    width: 1px;
  }
  .dio>>>.el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 17px;
    width: 24px;
  }
</style>
